import React, { Component } from 'react';
import axios from 'axios';
import 'antd/dist/antd.css';
import { Table } from 'antd';
class Test extends Component {
  constructor() {
    super();
  
    this.state = {
        userList:[],
    };
  }

  // 成功render并渲染完成真实dom之后触发，可以修改dom。这个函数被调用的时候，dom已经被创建。
  componentDidMount() {
    console.log("---------------")
    http.get('/user/getAllUsers').then((data) =>{
      this.setState({"userList":data});
      console.log("---------------:"+JSON.stringify(data))
    })
  
  }

  render() {
    const columns = [
        {
          title: 'Name',
          dataIndex: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
        },
      ];
      const data = [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
        },
      ];


      const columnsData = [
        {
          title: 'Name',
          dataIndex: 'name',
        },
        {
          title: 'Password',
          dataIndex: 'password',
        },
        {
          title: 'Phone',
          dataIndex: 'phone',
        },
      ];


      return (<div>
        <h4>Middle size table</h4>
        <Table columns={columnsData} dataSource={this.state.userList.data}  rowKey={record => record.id} size="middle" />
        <h4>Small size table</h4>
        <Table columns={columns} dataSource={data} size="small" />
      </div>)
      
  }
}

export default Test;